<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <el-aside width="300px">
      <!-- 功能一级菜单，例如： 消息、联系人、设置等 -->
      <div class="aside-menu">
        <div>
          <div class="logo">
            <el-avatar src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
          </div>

          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              :collapse="true"
          >
            <el-menu-item index="2">
              <el-icon><setting /></el-icon>
              <template #title>消息</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <template #title>好友</template>
            </el-menu-item>
          </el-menu>
        </div>

        <div>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              :collapse="true"
          >
            <el-menu-item index="2">
              <el-icon><setting /></el-icon>
              <template #title>消息</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <template #title>好友</template>
            </el-menu-item>
          </el-menu>
        </div>
      </div>

      <!-- 二级菜单 -->
      <div>
        <!-- 搜索框 -->
        <el-input
            v-model="search"
            style="width: 236px; height: 60px"
            placeholder="Please Input"
            :prefix-icon="Search"
            clearable
        />

        <!-- 历史聊天会话 -->
        <div style="height: calc(100% - 60px)">
          <el-scrollbar>

            <div v-for="item in 5" :key="item" class="scrollbar-demo-item">
              <el-badge value="new" class="item" :offset="[40, 5]" hidden>
                <div style="height: 100%; width: 100%">
                  comments
                </div>
              </el-badge>
            </div>

            <div v-for="item in 2" :key="item" class="scrollbar-demo-item">
              <el-badge value="new" class="item" :offset="[40, 5]">
                <div style="height: 100%; width: 100%">
                  comments
                </div>
              </el-badge>
            </div>

            <div v-for="item in 2" :key="item" class="scrollbar-demo-item">
              <el-badge value="hot" class="item" :offset="[40, 5]">
                <div style="height: 100%; width: 100%">
                  comments
                </div>
              </el-badge>
            </div>


            <div v-for="item in 2" :key="item" class="scrollbar-demo-item">
              <el-badge value="99" class="item" :offset="[40, 5]">
                <div style="height: 100%; width: 100%">
                  comments
                </div>
                <template #content="{ value }">
                  <div class="custom-content">
                    <el-icon>
                      <Message />
                    </el-icon>
                    <span>{{ value }}</span>
                  </div>
                </template>
              </el-badge>
            </div>

            <div v-for="item in 5" :key="item" class="scrollbar-demo-item">
              <el-badge :value="200" :max="99" class="item" :offset="[40, 5]">
                <div style="height: 100%; width: 100%">
                  comments
                </div>
              </el-badge>
            </div>

            <div v-for="item in 5" :key="item" class="scrollbar-demo-item">
              <el-badge :value="6" :max="9" class="item" :offset="[40, 5]" type="info">
                <div style="height: 100%; width: 100%">
                  comments
                </div>
              </el-badge>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-aside>

    <!-- 内容展示 -->
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <!-- 聊天室，展示聊天内容 -->
      <el-main>

        <!-- 单条聊天消息 -->
        <div style="height: 100%">
          <el-scrollbar>
            <div v-for="message in messages" :key="message.messageId" style="margin-bottom: 10px">
              <div>
                <el-avatar :size="24" :src="message.userAvatar" />
                <span style="margin-left: 6px">{{ message.senderId }}</span>
              </div>
              <div>{{ message.content }}</div>
            </div>
          </el-scrollbar>
        </div>



      </el-main>

      <!-- 消息发送工具栏 -->
      <el-footer>
        <div style="height: 40px; line-height: 40px; background-color: antiquewhite">功能按钮</div>

        <!-- 消息输入框 -->
        <el-mention
            v-model="message"
            :options="options"
            :loading="loading"
            placeholder="请输入..."
            @keyup.enter="sendMessage"
            @search="handleSearch"
            whole
            clearable
            maxlength="1000"
            show-word-limit
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
        >
          <template #label="{ item }">
            <div style="display: flex; align-items: center">
              <el-avatar :size="24" :src="item.avatar" />
              <span style="margin-left: 6px">{{ item.value }}</span>
            </div>
          </template>
        </el-mention>
        <!-- 按钮默认是禁用，只有当用户输入了内容才能恢复发送点击 -->
        <el-button type="primary" disabled @click="sendMessage">发送</el-button>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import {onBeforeUnmount, ref} from 'vue'
import {Search, Message, Setting, Document} from '@element-plus/icons-vue'
import {MentionOption} from "element-plus";

// 搜索框输入
const search = ref('')
const sendMessage = () => {
  console.log('sendMessage')
}

// 侧边栏






// 聊天室相关





// 消息类型
type Message = {
  // 消息ID
  messageId: string;
  // 发送者ID
  senderId: string;
  // 发送者用户名
  userName: string;
  // 接收者ID 私聊时使用
  receiverId?: string;
  // 群组ID 群聊时使用
  groupId?: string;
  // 消息内容
  content: string;
  // 发送时间
  sendTime: string;
  // 消息类型
  type: 'private' | 'group';
  // 用户头像
  userAvatar: string,
};
// 是一个响应式的数组，用来存储所有的聊天记录。
const messages = ref<Message[]>([]);

const mockData = () => {
  for (let i = 0; i < 20; i++) {
    messages.value.push({
      messageId: 'message-id', // 消息ID
      senderId: 'user-id', // 用户ID应该来自登录状态或其他方式获取
      userName: 'Fuphoenixes',
      receiverId: 'user-id', // 私聊时使用
      groupId: 'group-id', // 群聊ID
      content: 'Hello, World!', // 消息内容
      sendTime: new Date().toISOString(),
      type:'private',
      userAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    })
  }
}

mockData()



// 输入区相关，使用和配置参考 https://element-plus.org/zh-CN/component/mention.html
const message = ref('')
const loading = ref(false)
// 获取最近发言的用户列表当作 @ 输入提示
const options = ref<MentionOption[]>([
  {
    label: 'Fuphoenixes',
    value: 'Fuphoenixes',
    avatar: 'https://avatars.githubusercontent.com/u/27912232',
  },
  {
    label: 'kooriookami',
    value: 'kooriookami',
    avatar: 'https://avatars.githubusercontent.com/u/38392315',
  },
  {
    label: 'Jeremy',
    value: 'Jeremy',
    avatar: 'https://avatars.githubusercontent.com/u/15975785',
  },
  {
    label: 'btea',
    value: 'btea',
    avatar: 'https://avatars.githubusercontent.com/u/24516654',
  },
])

let timer: ReturnType<typeof setTimeout>
// 输入框输入 @ 触发搜索
const handleSearch = (pattern: string) => {
  console.log("handleSearch", pattern)
  for (const sElement of JSON.stringify(pattern)) {
    console.log(sElement)
  }
  if (timer) clearTimeout(timer)

  loading.value = true
  timer = setTimeout(() => {
    // 模拟数据搜索，实际需要从后台获取数据
    const data = options.value

    options.value = data.map(
        (item) => ({
          value: pattern + item.value,
          avatar: pattern + item.avatar,
        })
    )
    loading.value = false
  }, 1500)
}
onBeforeUnmount(() => {
  if (timer) clearTimeout(timer)
})
</script>

<style scoped lang="scss">
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  display: flex;
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
  overflow: hidden;
}
.layout-container-demo .el-menu {
  border-right: none;
}
//.layout-container-demo .el-main, .el-footer {
//  padding: 0;
//}


:deep(.el-main) {
  height: calc(100% - 260px);
  padding: 0;
  padding-left: 20px;
}

:deep(.el-footer) {
  height: 200px;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}



// 侧边栏功能菜单
.aside-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 64px;
  height: 100%;
  background-color: beige;

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
  }
}



// 侧边栏聊天记录用户和群组样式
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background-color: beige;
  color: var(--el-color-primary);
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.custom-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}


// 消息输入框样式调整
:deep(.el-textarea__inner) {
  height: 100px;
}
</style>